<template>
	<view class="custom-message ss-p-b-40">
		<view class="custom-top ss-flex align-center">
			<view>{{message.payload.custom.platform}}</view>
		</view>
		<view class="custom-money ss-m-t-15">{{message.payload.custom.money}}</view>
		<view class="custom-status ss-m-t-12">
			<text>{{message.payload.custom.money_msg}}</text>
		</view>
		<view class="custom-tips ss-flex ss-p-x-28 ss-m-t-35">
			<view class="custom-label">{{customShowText(message.payload.custom).label}}</view>
			<view class="custom-content ss-line-1">{{customShowText(message.payload.custom).content}}
			</view>
		</view>
		<view class="custom-tips ss-flex ss-p-x-28 ss-m-t-15">
			<view class="custom-label">{{customShowText(message.payload.custom).type}}</view>
			<view class="custom-content ss-line-1">
				{{customShowText(message.payload.custom).type_content}}
			</view>
		</view>
		<view class="custom-tips ss-flex ss-p-x-28 ss-m-t-15"
			v-if="message.payload.custom.wallet_type === 'recharge'">
			<view class="custom-label">{{customShowText(message.payload.custom).time}}</view>
			<view class="custom-content ss-line-1">
				{{customShowText(message.payload.custom).time_content}}
			</view>
		</view>
		<view class="custom-tips ss-flex ss-p-x-28 ss-m-t-15"
			v-if="message.payload.custom.wallet_type === 'withdrawal'">
			<view class="custom-label">{{customShowText(message.payload.custom).time}}</view>
			<view class="custom-content ss-line-1">
				{{customShowText(message.payload.custom).time_content}}
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		message: {
			type: Object,
			default: {}
		}
	})
	
	const customShowText = (item) => {
		if (item.wallet_type === 'refund') {
			return {
				label: '退款说明',
				content: item.refund_msg,
				type: '退款方式',
				type_content: item.refund_type
			}
		}
	
		if (item.wallet_type === 'payment') {
			return {
				label: '支付方式',
				content: item.payment_type,
				type: '支付对象',
				type_content: item.payment_object
			}
		}
	
		if (item.wallet_type === 'recharge') {
			return {
				label: '充值金额',
				content: item.recharge_money,
				type: '充值方式',
				type_content: item.recharge_type,
				time: '充值时间',
				time_content: item.recharge_time
			}
		}
		if (item.wallet_type === 'withdrawal') {
			return {
				label: '提现金额',
				content: item.withdrawal_money,
				type: '提现去处',
				type_content: item.withdrawal_type,
				time: '提现时间',
				time_content: item.withdrawal_time
			}
		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}
	
	.custom-message {
		width: 694rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;
	
		.custom-top {
			height: 84rpx;
			border-bottom: 1rpx solid #F5F5F5;
			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
			padding: 0 28rpx;
	
			.custom-top-image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 28rpx;
			}
		}
	
		.custom-money {
			text-align: center;
			font-weight: 700;
			font-size: 40rpx;
			color: #3D3D3D;
		}
	
		.custom-status {
			text-align: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #B1B1B1;
		}
	
		.custom-tips {
			.custom-label {
				font-weight: 400;
				font-size: 24rpx;
				color: #3D3D3D;
				margin-right: 60rpx;
			}
	
			.custom-content {
				width: 464rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #3D3D3D;
			}
		}
	
		.custom-details {
			width: 100%;
			height: 92rpx;
			border-top: 1rpx solid #F5F5F5;
	
			.custom-details-left {
				font-weight: 400;
				font-size: 24rpx;
				color: #3D3D3D;
			}
		}
	}
</style>